<template>
     <div style="font-size: 16px;font-weight: 600;">
        <el-radio></el-radio>呼叫费用
    </div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <el-row>
            <el-form-item label="姓名">
                <el-input v-model="state.dataForm.username" type="text" clearable placeholder="请输入"
                    style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="日期">
                <el-date-picker v-model="state.dataForm.startDate" type="date" placeholder="开始日期"
                    style="width: 220px"></el-date-picker>
            </el-form-item>
            <el-form-item label-width="0px">
                <el-date-picker v-model="state.dataForm.endDate" type="date" placeholder="结束日期"
                    style="width: 220px"></el-date-picker>
            </el-form-item>
            <!-- 查询 -->
            <el-form-item>
                <el-button @click="state.getDataList()" type="primary">{{ $t("query") }}</el-button>
            </el-form-item>
            <!-- 导入 -->
            <el-form-item>
                <el-upload :on-change="handleChange" :file-list="fileList">
                    <template #default>
                        <el-button type="primary">导入</el-button>
                    </template>
                </el-upload>
            </el-form-item>
            <!-- 导出 -->
            <el-form-item>
                <el-button type="primary" @click="state.exportHandle()">{{ $t("export") }}</el-button>
            </el-form-item>
        </el-row>
        <!-- 表格 -->
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }" center
            border v-loading="state.dataListLoading" :data="state.dataList"
            @selection-change="state.dataListSelectionChangeHandle">
            <el-table-column type="selection"></el-table-column>
            <el-table-column align="center" prop="pdept" label="部门组" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="dept" label="项目组" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="username" label="姓名" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="time" label="日期" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="seatUser" label="坐席账号" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="caller" label="主叫号码" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="callee" label="被叫号码" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="duration" label="通话时长" show-overflow-tooltip></el-table-column>
        </el-table>
    </el-form>
    <!-- 页码 -->
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle"></el-pagination>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import baseService from "@/service/baseService";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import { ElMessage } from "element-plus";
const view = reactive({
    getDataListURL: '/crm/nocdescribelog/page',
    getDataListIsPage: true,
    deleteURL: "/crm/nocdescribelog",
    deleteIsBatch: true,
    exportURL: "/crm/nocdescribelog/export",
    dataForm: {
        id: "",
        username: "",
        dataListSelections: [],
        startDate: "",//开始日期
        endDate: "",//结束日期
    },
});

const state = reactive({ ...useView(view), ...toRefs(view) });

// 导入
const fileList = ref([]);
const handleChange = (file: any, fileList: any) => {
    const formData = new FormData();
    formData.append('file', file.raw); // 将上传的文件添加到 FormData 中

    return baseService.post("/crm/nocdescribelog/import", formData).then((res) => {
        if (res.code === 0) {
            // 重新获取数据列表
            state.getDataList();
            return ElMessage.success("导入成功");
        }
    });
};

</script>
<style lang="scss" scoped>
::v-deep .el-table .cell {
    white-space: nowrap;
}

::v-deep .el-upload-list {
    display: none;
}
</style>